<!-- Index -->
<template>
    <div class="Index">
        <el-container style="height: 100%">
            <el-header style="z-index: 1"><Header></Header></el-header>
            <el-container id="main-container" style="height: calc(100% - 80px)">
                <el-aside width="180px"><Aside></Aside></el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import AsideVue from "./Aside.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import Header from "./Header.vue";
import Aside from "./Aside.vue";

export default {
    name: "Index",
    components: { Header, Aside },
    props: [],
    data() {
        //这里存放数据
        return {};
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        // 获取用户和学校信息
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.Index {
    height: 100%;
    width: 100%;
}
#main-container {
    width: 100%;
    transition: 0.4s linear;
}
@media screen and (min-width: 1920px) {
    #main-container {
        width: 90%;
        transition: 0.4s linear;
    }
}
@media screen and (min-width: 2222px) {
    #main-container {
        width: 80%;
        transition: 0.4s linear;
    }
}
.el-header {
    background-color: #2d72cca1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    height: 100%;
    line-height: 200px;
    overflow-x: hidden;
    overflow: -Scroll;
    padding-bottom: 20px;
    border-right: 1px solid #d3dce6 !important;
}

.el-main {
    margin: 0;
    padding: 7px;
    background-color: #e9eef3;
    height: 100%;
    color: #333;
    text-align: center;
}

.el-container {
    height: 100%;
    margin: auto;
}
</style>
